<template>
	<view>
		<view :class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt?'join':'') + ' ' + (iScart?'joinCart':'')"
			class="product-window lease-box"
			@touchmove.stop.prevent="moveHandle">
			<!--      商品信息-->
			<view class="sku-card goods-box">
				<view class="main">
					<view class="pictrue"
						@click="showImg()">
						<image :src="attr.productSelect[attr.goodsTypeSelect].image"></image>
						<view v-if="fangda"
							class="icon flex-center">
							<view class="iconfont icon-ic_enlarge"></view>
						</view>
					</view>
					<!-- 商城：图片右侧 -->
					<view v-if="attr.goodsTypeSelect==='mall'"
						class="pl-24 pt-24 flex-col">
						<view v-if="attr.productSelect[attr.goodsTypeSelect].integral"
							class="flex-y-center">
							<image class="w-32 h-32"
								src="../../static/img/mall05.png"></image>
							<text class="lh-40rpx font-num fs-40 SemiBold pl-8">
								{{ attr.productSelect[attr.goodsTypeSelect].integral }}
							</text>
							<text class="fs-28 lh-40rpx px-8 text--w111-666">+</text>
							<baseMoney :money="attr.productSelect[attr.goodsTypeSelect].price"
								color="var(--view-theme)"
								decimalSize="28"
								integerSize="40"
								symbolSize="28"
								weight></baseMoney>
						</view>
						<baseMoney v-else
							:money="attr.productSelect[attr.goodsTypeSelect].price"
							decimalSize="32"
							incolor="var(--primary-theme-con)"
							integerSize="48"
							symbolSize="32"
							weight></baseMoney>
						<view v-if="type == 0"
							class="inline-block h-48 lh-48rpx text-center rd-24rpx bg-color fs-24 text--w111-fff px-20 mt-16">
							预估到手
							<text class="fs-28 fw-600 pl-8">
								¥{{ attr.productSelect[attr.goodsTypeSelect].delivery_price }}
							</text>
						</view>
						<view class="mt-12 fs-24 text-#999">库存:{{
                                attr.productSelect[attr.goodsTypeSelect].stock
                            }}
						</view>
					</view>
					<!-- 租赁：图片右侧 -->
					<view v-else-if="attr.goodsTypeSelect==='lease'"
						class="pic-right pl-24 flex-col">
						<view class="flex align-item-baseline">
							<baseMoney :leaseTagShow="false"
								:leaseType="1"
								:money="storeSkuCheck.day_price"
								decimalSize="32"
								incolor="var(--primary-theme-con)"
								integerSize="48"
								symbolSize="32"
								weight></baseMoney>
							<!-- vip价格 -->
							<view v-if="showVipPrice && storeSkuCheck.vip_day_price>0"
								class="svip-badge acea-row row-middle">
								<view class="svip_rd bg--w111-484643 text--w111-FDDAA4 px-8 acea-row row-middle">SVIP
								</view>
								<view class="flex align-item-baseline px-8 Regular fw-600">
									¥{{ storeSkuCheck.vip_day_price }}/
									<text class="fs-22">天</text>
								</view>
							</view>
						</view>
						<view class="lease-select fs-22 lh-48rpx mt-16">
							<text class="l text--w111-999 mr-10">已选:</text>
							<view class="r">{{ getAttrValueAlias() }}</view>
						</view>

					</view>
					<!--        <view class="close" @click="closeAttr">-->
					<!--          <text class="iconfont icon-ic_close fs-24"></text>-->
					<!--        </view>-->
				</view>
				<view v-if="attr.goodsTypeSelect==='lease'"
					class="buyout-box fs-26">
					<view v-if="showVipPrice && storeSkuCheck.vip_price>0"
						class="buy-l">
						<view>￥{{ storeSkuCheck.vip_price }}</view>
						<view class="buy-txt">SVIP价</view>
					</view>
					<view v-if="showVipPrice && storeSkuCheck.vip_price>0"
						class="line"></view>
					<view class="buy-l">
						<view>￥{{ storeSkuCheck.sku_price }}</view>
						<view class="buy-txt">总租金</view>
					</view>
					<view class="line"></view>
					<view class="buy-r">
						<view>￥{{ buyoutEnd() }}</view>
						<view class="buy-txt">到期买断尾款</view>
					</view>
				</view>
			</view>

			<!--      租赁：总租金，优惠券-->
			<!--      <view class="sku-card lease-price-box">-->
			<!-- 租赁：总租金-->
			<!--        <view v-if="attr.goodsTypeSelect==='lease'" class="lease-price pt-30 pb-32 lh-48rpx">-->
			<!--          <view class="lh-48rpx text-center">总租金：<text>￥{{ storeSkuCheck.sku_price }}</text></view>-->
			<!--          <view class="line bg-color"></view>-->
			<!--          <view class="lh-48rpx text-center">到期买断尾款：<text>￥{{ buyoutEnd() }}</text></view>-->
			<!--        </view>-->

			<!--            快捷下单优惠券-->
			<!--        <view class="item pb-24" v-if="attr.goodsTypeSelect==='lease' && storeInfo.is_quickOrder==1 && attr.productSelect.lease.params.is_checked==1 && coupon.list.length">-->
			<!--          <view class="px-32">-->
			<!--            <view @click="couponTap" class="coupon rd-28rpx flex-between-center">-->
			<!--              <text class="text&#45;&#45;w111-333 fs-28">优惠券</text>-->
			<!--              <view>-->
			<!--                <text class="text&#45;&#45;w111-333 fs-28">{{couponTitle}}</text>-->
			<!--                <text class="iconfont icon-ic_rightarrow fs-24 text&#45;&#45;w111-999 pl-8"></text>-->
			<!--              </view>-->
			<!--            </view>-->
			<!--          </view>-->
			<!--        </view>-->
			<!--      </view>-->
			<view class="scroll-box">
				<!--        <view class="sku-card store-sku-wrap" v-if="storeInfo.type===0 && attr.goodsTypeSelect==='lease' && storeSkuList.length>1">-->
				<!--          <view class="store-sku-tit flex align-item-center mb-32">-->
				<!--            <view class="fw-bold l">-->
				<!--              <image mode="widthFix" src="https://qn.ebaozu.cn/public/mini/static/recommend.png"></image>-->
				<!--              为你推荐-->
				<!--            </view>-->
				<!--            <text class="text&#45;&#45;w111-999 r fs-22">优质商家智能推荐</text>-->
				<!--          </view>-->
				<!--          <view class="store-sku-box">-->
				<!--            <view @click="storeSkuCheck=item" :class="['store-item',{'store-item-check':storeSkuCheck.id===item.id}]" v-for="(item,index) in storeSkuList" :key="index">-->
				<!--              <view class="line1 w-full">{{ item.store_name }}</view>-->
				<!--              <view class="store-price">￥{{ item.day_price }}/天</view>-->
				<!--            </view>-->
				<!--          </view>-->
				<!--        </view>-->
				<view class="sku-card rollTop">
					<view class="productWinList">
						<view v-for="(item, indexw) in getproductAttr()"
							:key="indexw"
							class="item">
							<view class="title fw-bold">{{ item.attr_name }}</view>
							<view class="listn acea-row row-middle">
								<view v-for="(itemn, indexn) in item.attr_value"
									:key="indexn"
									:class="item.index === itemn.attr ? 'on' : ''"
									class="itemn rd-28rpx b-ff"
									@click="tapAttr(indexw, indexn)">
									{{ item.attr_values_alias[indexn] || itemn.attr }}
								</view>
								<!--                自定义时间-->
								<view v-if="showTime && item.attr_name==='租赁天数'"
									class="time-box">
									<view class="time">
										<uni-datetime-picker v-model="timeRange"
											:start="nowDay"
											type="daterange"
											@change="changeTime" />
									</view>
								</view>
							</view>
						</view>
						<!-- 增值服务  && storeInfo.is_quickOrder!=1-->
						<view v-if="!is_super_user&&addServiceList.length>0 && attr.goodsTypeSelect==='lease'"
							class="item">
							<view class="title fw-bold">增值服务（可多选）</view>
							<view class="listn acea-row row-middle">
								<view v-for="(item, index) in addServiceList"
									:key="index"
									:class="item.select ? 'on' : ''"
									class="itemn rd-28rpx b-ff"
									@click="selectAddService(item)">
									{{ item.name }}￥{{ item.price }}
									<text v-if="item.tips"
										class="ebao-iconfont ebao-wenhao-yuankuang ml-12 fs-30 text-origin"
										@click.stop="openAddServiceTips(item.tips)"></text>
								</view>
							</view>
						</view>
						<view v-if="!is_super_user&&cardList.length>0 && attr.goodsTypeSelect==='lease'"
							class="card-item item">
							<view class="title fw-bold">卡项权益（可多选）</view>
							<view class="card-listn listn">
								<view v-for="(item, index) in cardList"
									:key="index"
									:class="item.select ? 'on' : ''"
									class="card-itemn itemn rd-28rpx b-ff"
									@click="selectCard(item)">
									<image :src="item.image"
										class="l"
										mode="aspectFill"></image>
									<view class="r">
										<view class="r-1">
											<view class="card-name fs-regular line1">{{ item.card_name }}</view>
											<text v-if="item.description"
												class="ebao-iconfont ebao-wenhao-yuankuang ml-12 fs-30 text-origin"
												@click.stop="openAddServiceTips(item.description)"></text>
										</view>
										<view class="r-2 ">￥{{ item.price }}</view>
									</view>
								</view>
							</view>
						</view>
						<!--            <view class="item" v-if="isDelivery">-->
						<!--               <view class="title">配送方式</view>-->
						<!--               <view class="listn acea-row row-middle">-->
						<!--                 <view class="itemn" v-if="attr.deliveryType.includes('1')" @click="getstoreInfo('1')" :class="flag==1?'on':isStoreBuy?'on2':''">商城配送</view>-->
						<!--                 <view class="itemn" v-if="selfPickup" @click="getstoreInfo('2')" :class="flag==2?'on':''">门店自提</view>-->
						<!--                 <view class="itemn" v-if="attr.deliveryType.includes('3') && storeList.length" @click="getstoreInfo('3')" :class="flag==3?'on':''">门店配送</view>-->
						<!--               </view>-->
						<!--            </view>-->
						<view v-if="flag ==1 && isDelivery"
							class="address on1"
							@click="openAddress">
							<view class="acea-row row-middle">
								<view class="max-w-596 line1">{{ addressInfo }}</view>
								<view class="iconfont icon-ic_rightarrow ml-8 fs-28"></view>
							</view>
							<view class="info">{{ nameInfo }}</view>
						</view>
						<view v-if="flag ==3 && isDelivery"
							:class="[deliveryType]"
							class="address"
							@click="openStore">
							<view class="acea-row row-middle">
								<view class="max-w-596 line1">{{ deliveryName }}</view>
								<view v-if="attr.isType != 1"
									class="iconfont icon-ic_rightarrow ml-8 fs-28"></view>
							</view>
							<view class="info">
								<text class="iconfont icon-ic_location51 fs-24 mr-10"></text>
								{{ deliveryAddress }}
								<text class="ml-16">{{ distance }}</text>
							</view>
						</view>
						<view v-if="flag ==2 && isDelivery"
							:class="attr.deliveryType.includes('1')?'on3':'on1'"
							class="address"
							@click="openStore">
							<view class="acea-row row-middle">
								<view class="max-w-596 line1">{{ deliveryName }}</view>
								<view v-if="attr.isType != 1"
									class="iconfont icon-ic_rightarrow ml-8 fs-28"></view>
							</view>
							<view class="info">
								<text class="iconfont icon-ic_location51 fs-24 mr-10"></text>
								{{ deliveryAddress }}
								<text class="ml-16">{{ distance }}</text>
							</view>
						</view>
					</view>
					<!-- 选数量：仅限商城 -->
					<!-- v-if="attr.goodsTypeSelect==='mall' && type != 'setMeal' && type !='points'" -->
					<view class="cart acea-row row-between-wrapper">
						<view class="title">数量</view>
						<view class="carnum acea-row row-left">
							<view v-if="attr.productSelect[attr.goodsTypeSelect].cart_num <= 1"
								:class="attr.productSelect[attr.goodsTypeSelect].cart_num <= 1 ? 'on' : ''"
								class="item reduce acea-row row-center-wrapper">
								<text class="iconfont icon-ic_Reduce"></text>
							</view>
							<view v-else
								:class="attr.productSelect[attr.goodsTypeSelect].cart_num <= 1 ? 'on' : ''"
								class="item reduce acea-row row-center-wrapper"
								@click="CartNumDes">
								<text class="iconfont icon-ic_Reduce"></text>
							</view>
							<view class='item num acea-row row-middle'>
								<input v-model="attr.productSelect[attr.goodsTypeSelect].cart_num"
									:adjust-position="true"
									:always-embed="true"
									cursor-spacing="30"
									data-name="productSelect.cart_num"
									type="number"
									@input="bindCode(attr.productSelect[attr.goodsTypeSelect].cart_num)"></input>
							</view>
							<view :class="attr.productSelect[attr.goodsTypeSelect].cart_num >= attr.productSelect[attr.goodsTypeSelect].stock ? 'on' : ''"
								class="item plus acea-row row-center-wrapper"
								@click="CartNumAdd">
								<text class="iconfont icon-ic_increase"></text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="isExtends"
				class="btn-box">
				<view v-if="attr.goodsType==='All'&&attr.goodsTypeSelect==='mall'"
					class="join_cart h-100 rd-40rpx cart"
					@click="cartConfirm('cart')">加入购物车
				</view>
				<!--				有规格：没库存-->
				<view v-if="attr.productSelect[attr.goodsTypeSelect].stock <= 0 && attr.productSelect[attr.goodsTypeSelect].unique"
					:style="isBook"
					class="joinBnt join_cart book-btn h-100 rd-40rpx text--w111-fff"
					@click="bookGoods">
					<text v-if="attr.productSelect[attr.goodsTypeSelect].params.is_book_lease">已预订</text>
					<text v-if="attr.productSelect[attr.goodsTypeSelect].params.is_book_lease"
						class="h-30 mr-12 ml-12 b-ff line"></text>
					<text>￥{{ attr.productSelect[attr.goodsTypeSelect].day_price }}/天</text>
					<text class="h-30 mr-12 ml-12 b-ff line"></text>
					<text class="fs-22 fw-500">约5天后可租</text>
				</view>
				<!--        没有该规格-->
				<view v-else-if="!attr.productSelect[attr.goodsTypeSelect].unique"
					class="joinBnt h-100 rd-40rpx bg-gray">
					已售罄
				</view>
				<view v-else
					class="joinBnt h-100 rd-40rpx bg-color"
					@click="cartConfirm">确定
				</view>
			</view>


			<view v-if="iSbnt && attr.productSelect[attr.goodsTypeSelect].stock>0 &&attr.productSelect[attr.goodsTypeSelect].quota>0"
				class="joinBnt h-100 rd-40rpx bg-color"
				@click="goCat">我要参团
			</view>
			<view v-else-if="(iSbnt && attr.productSelect[attr.goodsTypeSelect].quota<=0)||(iSbnt &&attr.productSelect[attr.goodsTypeSelect].product_stock<=0)"
				class="joinBnt h-100 rd-40rpx on">已售罄
			</view>
			<view v-if="iScart && attr.productSelect[attr.goodsTypeSelect].stock"
				class="joinBnt h-100 rd-40rpx bg-color"
				@click="goCat">确定
			</view>
			<view v-else-if="iScart && !attr.productSelect[attr.goodsTypeSelect].stock"
				class="joinBnt h-100 rd-40rpx on">已售罄
			</view>
		</view>
		<view :hidden="attr.cartAttr === false"
			class="mask"
			@click="closeAttr"
			@touchmove.stop.prevent="moveHandle"></view>
		<!-- 选择门店 -->
		<view :class="isStore?'store':''"
			class="product-window">
			<view class="storeTitle">选择门店
				<text class="iconfont icon-guanbi5"
					@click="closeStore"></text>
			</view>
			<view class="storeList">
				<view v-for="(item,index) in storeList"
					:key="index"
					:class="active == index?'on':''"
					class="item"
					@click="tapStore(index,item)">
					<view class="name line1">{{ item.name }}</view>
					<view class="address acea-row row-middle">
						<view class="iconfont icon-ic_location51"></view>
						<view class="info">{{ item.address }}{{ item.detailed_address }}</view>
					</view>
					<view class="time acea-row row-middle">
						<view class="iconfont icon-icon_clock"></view>
						<view>营业时间：{{ item.day_time }}</view>
					</view>
					<view v-if="active == index"
						class="iconfont icon-xuanzhong6"></view>
				</view>
			</view>
		</view>
		<view :hidden="isStore === false"
			class="mask on"
			@click="closeStore"
			@touchmove.prevent></view>
		<!--		<addressWindow ref="addressWindow" :pagesUrl="pagesUrl" :fromType="1" :address="address" @changeClose="changeClose" @OnChangeAddress="OnChangeAddress">-->
		<!--		</addressWindow>-->
		<couponListWindow :coupon='coupon'
			:openType='openType'
			@ChangCoupons="ChangCoupons"
			@ChangCouponsClone="ChangCouponsClone"
			@ruleToggle="ruleToggle"></couponListWindow>
		<!--    增值服务说明-->
		<uni-popup ref="addServicePop"
			border-radius="10px 10px 0 0"
			type="center">
			<view class="addServicePop">
				<text class="ebao-iconfont ebao-ic_close"
					@click="$refs.addServicePop.close()"></text>
				<view class="main">
					<mp-html :content="descCon"
						:preview-img="false"
						:selectable="false" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { storeProductSku } from "@/api/leaseOrder"
	// const plugin = requirePlugin('tradePay');
	import moment from "moment"
	import { attrValueAlias } from "@/tools/goods"

	let windowHeight = (uni.getSystemInfoSync().windowHeight * (3 / 4) - 238 - 100) * 2
	import addressWindow from "@/components/addressWindow"
	import couponListWindow from "@/components/couponListWindow"
	import { getAddressDefault } from "@/api/user.js"
	import { storeListApi } from "@/api/store.js"
	import {
		mapGetters,
		mapState
	} from "vuex"
	import { bookGoods, bookGoodsCancel, getCouponsQuick, getTemplate } from "../../api/order"
	import { getUserInfo } from "../../api/user"
	import { appCanGetId } from "../../config/app"
	import { bindingAlipayAuth } from "../../api/public"
	import Routine from "../../libs/routine"
	import { getProductDetail } from "../../api/store"

	export default {
		computed: {
			isBook() {
				return this.attr.productSelect[this.attr.goodsTypeSelect].params.is_book_lease ? "opacity:0.8" : ""
			},
			...mapState({
				nearbyStore: state => state.app.nearbyStore
			}),
			...mapGetters(["isLogin"]),
			selfPickup() {
				let obj = this.attr.deliveryType.includes("2") && this.selfStoreList.length
				return obj
			},
			deliveryType() {
				let on = ""
				if (this.attr.deliveryType.includes("1") && this.selfPickup) {
					on = "on2"
				} else if ((!this.attr.deliveryType.includes("1") && this.selfPickup) || (this.attr.deliveryType.includes("1") && !this.selfPickup)) {
					on = "on3"
				} else {
					on = "on1"
				}
				return on
			}
		},
		components: {
			addressWindow,
			couponListWindow
		},
		props: {
			is_super_user: {},
			showVipPrice: {
				default: false
			},
			isStoreBuy: {
				type: Number,
				value: 0
			},
			// 商品id
			productId: {
				type: Number | String,
				value: 0
			},
			attr: {
				type: Object,
				default: () => {}
			},
			attrValue: {
				type: Object,
				default: () => {}
			},
			storeInfo: {
				type: Object,
				default: () => {}
			},
			limitNum: {
				type: Number,
				value: 0
			},
			isShow: {
				type: Number,
				value: 0
			},
			iSbnt: {
				type: Number,
				value: 0
			},
			iSplus: {
				type: Number,
				value: 0
			},
			iScart: {
				type: Number,
				value: 0
			},
			is_vip: {
				type: Number,
				value: 0
			},
			type: {
				type: [Number, String],
				default: 0
			},
			fangda: {
				type: Boolean,
				default: true
			},
			isExtends: {
				type: Boolean,
				default: false
			},
			storeId: {
				type: Number,
				value: 0
			},
			promotions_type: {},
			productValue: {}
		},
		data() {
			return {
				storeSkuList: [],
				storeSkuCheck: { id: "pt" }, //弹窗选择的sku，可能包含门店
				flag: 1,
				nameInfo: "", //地址用户信息
				addressInfo: "", // 商城快递
				deliveryName: "", // 门店配送
				distance: "",
				deliveryAddress: "",
				address: {
					address: false
				},
				pagesUrl: "",
				user_latitude: 0,
				user_longitude: 0,
				isDelivery: false,
				storeList: [],
				deliveryStoreList: [],
				selfStoreList: [],
				active: 0,
				isStore: false,
				windowHeight: windowHeight,
				isAddress: false,
				// 增值服务
				descCon: "",
				addServiceList: [],
				// 自定义时间
				showTime: false,
				timeRange: "",
				timeRangeBook: "",
				nowDay: "",
				entityIds: "",
				user: {},
				// 优惠券
				coupon: { coupon: false, list: [] },
				couponId: 0, //优惠券id
				couponTitle: "请选择", //优惠券
				coupon_price: 0, //优惠券抵扣金额
				openType: 1, //优惠券打开方式 1=使用
				selectKey: "",
				discountResponse: {},

				// 卡项商品
				cardList: []
			}
		},
		watch: {
			"attr.deliveryType"(newValue, oldValue) {
				if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
					if (newValue.length) {
						if (this.active < 1) {
							this.getList()
						}
						let num = 1
						if (newValue[0] == 1 && this.isStoreBuy) {
							num = newValue[1]
						} else {
							num = newValue[0]
						}
						this.flag = num
						this.$emit("deliveryFun", num)
					}
				}
			},
			// 规格切换后
			"attr"() {
				// 固定租期切换规格，请求优惠券
				if (!this.showTime) {
					this.getCouponList()
				}
				// 获取门店价格
				this.storeProductSku()
			},
			"storeId"() {
				this.defaultStore()
				this.$emit("onstoreId", this.storeList[this.active], this.flag)
			}
		},
		mounted() {
			try {
				this.user_latitude = uni.getStorageSync("user_latitude")
				this.user_longitude = uni.getStorageSync("user_longitude")
			} catch (e) {}
			uni.$off("activeAddress")
			uni.$on("activeAddress", data => {
				this.getAddressDefault()
			})

			this.checkCustom()
			this.getTemplate()

			this.storeProductSku()
		},
		created() {
			this.setAddServiceList()
			this.getUser()
			this.getCouponList()
			this.setCardList()
		},
		methods: {
			buyoutEnd() {
				if (this.storeSkuCheck.buyout_final_money > 0) {
					return this.storeSkuCheck.buyout_final_money
				}
				let endMoney = (parseFloat(this.storeSkuCheck.buyout_money) - parseFloat(this.storeSkuCheck.sku_price)).toFixed(2)
				return endMoney > 0 ? endMoney : 0
			},
			getUser() {
				getUserInfo().then(res => {
					this.user = res.data
				})
			},
			getId() {
				let that = this
				Routine.getCode().then(code => {
					console.log("个人信息code", code)
					bindingAlipayAuth({ code: code }).then(res => {
						if (res.status === 200) {
							that.cartConfirm("bindingSuccess")
						}
					})
				})
			},
			getTemplate() {
				getTemplate().then(res => {
					if (res.status === 200) {
						res.data.forEach(item => {
							if (item.name === "秒杀开始提醒") {
								this.entityIds = item.tempid
							}
						})
					}
				})
			},
			// 预定
			bookGoods() {
				// 已订阅，则取消订阅
				if (this.attr.productSelect[this.attr.goodsTypeSelect].params.is_book_lease) {
					bookGoodsCancel({
						product_id: this.storeInfo.id,
						sku_id: this.attr.productSelect[this.attr.goodsTypeSelect].id
					}).then(res => {
						if (res.status === 200) {
							this.$util.Tips({
								title: "已取消预定"
							})
							this.$emit("getGoodsDetails")
							this.closeAttr()
						}
					})
					return
				}
				let that = this
				my.requestSubscribeMessage({
					entityIds: [
						that.entityIds
					],
					success: res => {
						console.log("接口调用成功的回调", res)
					},
					fail: err => {
						console.log("接口调用失败的回调", err)
					}
				})
				bookGoods({
					product_id: this.storeInfo.id,
					sku_id: this.attr.productSelect[this.attr.goodsTypeSelect].id,
					start_date: "",
					end_date: ""
				}).then(res => {
					if (res.status === 200) {
						this.$util.Tips({
							title: "预定成功"
						})
						this.closeAttr()
						this.$emit("getGoodsDetails")
					}
				})
			},
			checkCustom() {
				this.attr.productAttr.lease.forEach(item => {
					if (item.attr_name === "租赁天数") {
						this.showTime = item.index === "自定义"
						if (item.index === "自定义") {
							//   刚切换到自定义，清空优惠券列表
							this.coupon.list = []
							this.couponId = 0
							this.couponTitle = "请选择"
						}
					}
				})
				this.getCustomFirstPrice()
				// moment获取明天时间，时分秒为
				this.nowDay = moment().format("YYYY-MM-DD")
			},
			// 自定义：优惠券
			getCustomFirstPrice() {
				if (this.showTime && this.timeRange.length > 0) {
					if (!this.selectKey) {
						this.selectKey = this.getCheckedValue().join(",")
					}
					let unique = this.productValue.lease[this.selectKey].unique
					// 获取自定义首期实付
					getProductDetail(this.storeInfo.id, {
						promotions_type: this.promotions_type,
						startDate: this.timeRange[0],
						endDate: this.timeRange[1],
						unique: unique
					}).then(res => {
						if (res.status === 200) {
							let customPrice = res.data.productValueLease[this.selectKey].first_rent_price
							this.getCouponList(customPrice)
						}
					})
				}
			},

			// 卡项商品
			setCardList() {
				if (!this.storeInfo.added_service || this.storeInfo.added_service.lenth == 0) return
				let newCard = []
				this.storeInfo.related.forEach(item => {
					let itemNew = { ...item }
					itemNew.select = false
					newCard.push(itemNew)
				})
				this.cardList = newCard
				console.log("cardList", this.cardList)
			},
			selectCard(item) {
				this.$set(item, "select", !item.select)
				// this.cardList[index].select=!this.cardList[index].select
				// console.log('this.cardList',this.cardList)
			},

			// 增值服务
			openAddServiceTips(desc) {
				this.descCon = desc
				this.$refs.addServicePop.open()
			},
			setAddServiceList() {
				if (!this.storeInfo.added_service) return
				let addService = JSON.parse(this.storeInfo.added_service)
				let newAddService = []
				addService.forEach(item => {
					let itemNew = { ...item }
					itemNew.price = parseFloat(item.price)
					itemNew.required = parseInt(item.required)
					itemNew.select = false
					if (itemNew.required === 1) {
						itemNew.select = true
					}
					newAddService.push(itemNew)
				})
				this.addServiceList = newAddService
			},
			selectAddService(item) {
				if (item.required === 1) return
				// 点击取消并且有提示内容
				if (item.select && item.cancel_valued_tip) {
					uni.showModal({
						title: "提示",
						content: `${item.cancel_valued_tip}`,
						cancelText: "我在想想",
						confirmText: "确认取消",
						success: function(res) {
							if (res.confirm) {
								item.select = false
							}
						}
					})
				} else {
					item.select = !item.select
				}
			},
			// 显示规格key别名
			getAttrValueAlias() {
				return attrValueAlias(this.attrValue[this.attr.goodsTypeSelect], this.attr.productAttr[this.attr.goodsTypeSelect])
			},
			getproductAttr() {
				return this.attr.productAttr[this.attr.goodsTypeSelect]
			},

			closeStore() {
				this.isStore = false
			},
			openStore() {
				if (this.attr.isType != 1) {
					this.isStore = true
				}
			},
			// 切换门店
			tapStore(index, item) {
				this.active = index
				this.deliveryName = item.name
				this.deliveryAddress = item.detailed_address + "\xa0"
				this.distance = "距您" + item.range + "km"
				this.isStore = false
				this.$emit("onstoreId", item, this.flag)
			},
			// 切换地址
			OnChangeAddress: function(e, row) {
				this.address.address = false
				this.nameInfo = row.real_name + "\xa0\xa0" + row.phone
				this.addressInfo = row.province + "省" + row.city + row.district + row.street + row.detail
				this.$emit("onAddressId", row)
			},
			// 打开地址弹窗
			openAddress() {
				let pagesUrl = "/pages/users/user_address/index?fromType=1"
				if (!this.isAddress) {
					this.$refs.addressWindow.getAddressList()
					this.address.address = true
					this.pagesUrl = pagesUrl
				} else {
					uni.navigateTo({
						url: pagesUrl
					})
				}
			},
			// 关闭地址弹窗；
			changeClose: function() {
				this.$set(this.address, "address", false)
			},
			// 配送地址
			getAddressDefault() {
				getAddressDefault().then(res => {
					let data = res.data
					this.isAddress = Array.isArray(data)
					if (!Array.isArray(data)) {
						this.nameInfo = data.real_name + "\xa0\xa0" + data.phone
						this.addressInfo = data.province + "省" + data.city + data.district + data.street + data.detail
						this.$emit("onAddressId", data)
					} else {
						this.addressInfo = "点击添加地址"
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					})
				})
			},
			selfLocation() {
				let self = this
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.location().then(res => {
						this.user_latitude = res.latitude
						this.user_longitude = res.longitude
						uni.setStorageSync("user_latitude", res.latitude)
						uni.setStorageSync("user_longitude", res.longitude)
						self.getList()
					})
				} else {
					// todo
					// #endif
					// uni.getLocation({
					// 	type: 'wgs84',
					// 	success: (res) => {
					// 		try {
					// 			this.user_latitude = res.latitude;
					// 			this.user_longitude = res.longitude;
					// 			uni.setStorageSync('user_latitude', res.latitude);
					// 			uni.setStorageSync('user_longitude', res.longitude);
					// 		} catch {}
					// 		self.getList();
					// 	},
					// 	fail:(res)=>{
					// 		console.log(res)
					// 		// #ifdef MP
					// 		uni.getSetting({
					// 			success: res=>{
					// 				if(typeof(res.authSetting['scope.userLocation']) != 'undefined' && !res.authSetting['scope.userLocation']){
					// 				  uni.setStorageSync('refuseLocation', true);
					// 				}
					// 			}
					// 		})
					// 		// #endif
					// 	}
					// 	// complete: function() {
					// 	// 	self.getList();
					// 	// }
					// });
					// #ifdef H5
				}
				// #endif
			},
			getList: function(id) {
				let data = {
					latitude: this.user_latitude || "", //纬度
					longitude: this.user_longitude || "", //经度
					page: 1,
					limit: 100,
					product_id: this.productId,
					is_store: "", //查找所有门店列表
					type: this.type == 1 ? 1 : 0
					// store_id: id?id:this.nearbyStore
				}
				storeListApi(data)
					.then(res => {
						let list = res.data.list.list
						if (!id && list.length && this.attr && (this.attr.deliveryType.indexOf("2") != -1 || this.attr.deliveryType.indexOf("3") != -1)) {
							this.isDelivery = true
							if (this.$store.getters.isLogin) {
								this.getAddressDefault()
							}
						}
						// 拆分自提门店列表和配送门店列表
						let selfStoreList = []
						list.forEach(function(item, index) {
							if (item.is_store === 1) selfStoreList.push(item)
						})
						this.storeList = this.flag == 2 ? selfStoreList : list
						this.selfStoreList = selfStoreList //门店自提
						this.deliveryStoreList = list //门店配送
						this.defaultStore()
						this.$emit("onstoreId", this.storeList[this.active], this.flag)
					})
					.catch(err => {
						this.$util.Tips({
							title: err
						})
					})
			},
			defaultStore() {
				let storeId = this.storeId ? this.storeId : this.nearbyStore
				let storeIndex = 0
				this.storeList.forEach((item, index) => {
					if (item.id == storeId) {
						storeIndex = index
					}
				})
				this.active = storeIndex
				this.deliveryName = this.storeList[storeIndex].name
				this.deliveryAddress = this.storeList[storeIndex].detailed_address + "\xa0"
				this.distance = "距您" + this.storeList[storeIndex].range + "km"
			},
			// 选择配送方式
			getstoreInfo(index) {
				if (index == 1 && this.isStoreBuy) {
					return false
				}
				if (index === "2" || index === "3") {
					if ((!this.user_latitude || !this.user_longitude) && !uni.getStorageSync("refuseLocation")) {
						this.selfLocation()
					}
				}
				if (index === "2") this.storeList = this.selfStoreList //门店自提
				if (index === "3") this.storeList = this.deliveryStoreList //门店配送
				this.flag = index
				this.defaultStore()
				this.$emit("deliveryFun", index)
				this.$emit("onstoreId", this.storeList[this.active], index)
			},
			showLocation() {
				if ((!this.user_latitude || !this.user_longitude) && !uni.getStorageSync("refuseLocation")) {
					this.selfLocation()
				}
			},
			moveHandle() {},
			goCat: function() {
				this.$emit("goCat")
			},
			/**
			 * 购物车手动输入数量
			 *
			 */
			bindCode: function(e) {
				this.$emit("iptCartNum", this.attr.productSelect[this.attr.goodsTypeSelect].cart_num)
			},
			closeAttr: function() {
				this.$emit("myevent")
			},
			CartNumDes: function() {
				this.$emit("ChangeCartNum", false)
			},
			CartNumAdd: function() {
				this.$emit("ChangeCartNum", true)
			},
			tapAttr: function(indexw, indexn) {
				let that = this
				that.$emit("attrVal", {
					indexw: indexw,
					indexn: indexn
				})
				// index就是选中的属性值
				this.$set(this.attr.productAttr[this.attr.goodsTypeSelect][indexw], "index", this.attr.productAttr[this.attr.goodsTypeSelect][indexw].attr_values[indexn])
				let value = that
					.getCheckedValue()
					.join(",")
				that.$emit("ChangeAttr", value)
				this.selectKey = value
				this.checkCustom()
			},
			//获取被选中属性；
			getCheckedValue: function() {
				let productAttr = this.attr.productAttr[this.attr.goodsTypeSelect]
				let value = []
				for (let i = 0; i < productAttr.length; i++) {
					for (let j = 0; j < productAttr[i].attr_values.length; j++) {
						if (productAttr[i].index === productAttr[i].attr_values[j]) {
							value.push(productAttr[i].attr_values[j])
						}
					}
				}
				return value
			},
			showImg() {
				this.$emit("getImg")
			},
			changeTime() {
				if (this.attr.goodsTypeSelect === "mall") {
					this.showTime = false
					return true
				}
				let that = this
				// 计算相差的天数,包括收尾
				let date1 = new Date(this.timeRange[0])
				let date2 = new Date(this.timeRange[1])
				let days = (date2.getTime() - date1.getTime()) / (24 * 3600 * 1000) + 1
				if (days < this.storeInfo.min_lease_days) {
					this.$util.Tips({
						title: "租期天数不能少于" + this.storeInfo.min_lease_days + "天"
					})
					return false
				}
				let maxDays = this.attr.productSelect[this.attr.goodsTypeSelect].params.lease_custom_num * 18
				if (days > maxDays) {
					// uniapp对话框
					uni.showModal({
						title: "提示",
						content: `租期天数不能超过${maxDays}天\n请重选租期`,
						showCancel: false
					})
					return false
				}
				if (!this.timeRange[0] && this.showTime) {
					this.$util.Tips({
						title: "请选择日期"
					})
					return false
				}
				// 如果选了时间，请求详情接口，获取自定义首期实付金额
				this.getCustomFirstPrice()
				return true
			},
			cartConfirm(type) {
				// 有隐私权限接口
				if (appCanGetId && type != "bindingSuccess") {
					if (this.user.is_complete === 0) {
						this.getId()
						return
					}
				}
				// 自定义：确认二次检验
				if (this.showTime && !this.changeTime()) return

				let addService = []
				addService = this.addServiceList.filter(item => {
					return item.select
				})

				// 卡项商品
				let related = []
				related = this.cardList.filter(item => {
					return item.select
				})


				// 租赁开始时间，结束时间
				// 租赁天数：没选择自定义
				let quickDuration = ""
				if (this.attr.goodsTypeSelect === "lease") {
					if (!this.showTime) {
						// 清除自定义时间
						this.timeRange = []
						// 选了其他天数，传给快捷下单组件
						this.attr.productAttr.lease.forEach(item => {
							if (item.attr_name === "租赁天数") {
								quickDuration = item.index.split("天")[0]
							}
						})
					} else {
						// moment 计算两个日期的天数差
						quickDuration = moment(this.timeRange[1]).diff(moment(this.timeRange[0]), "days") + 1
					}
				}

				// 0元随心租：清空增值服务+卡项权益
				if (this.is_super_user) {
					addService = []
					related = []
				}

				// type 目前用于加入购物车
				this.$emit("onConfirm", {
					type: type,
					addService: addService,
					related: related,
					timeRange: this.timeRange,
					quickDuration: quickDuration,
					coupon_id: this.coupon.list.length ? this.couponId : 0,
					storeSkuCheck: this.storeSkuCheck.id === "pt" ? "" : this.storeSkuCheck
					// storeUnique:this.storeSkuCheck.id==='pt'?'':this.storeSkuCheck.unique,
					// storeProductId:this.storeSkuCheck.id==='pt'?'':this.storeSkuCheck.product_id
				})
			},
			// 获取当前金额可用优惠券
			getCouponList: function(customPrice) {
				if (!this.$store.getters.isLogin) return

				let price = customPrice || this.attr.productSelect[this.attr.goodsTypeSelect].params.first_rent_price
				// 优惠券列表只获取一次，默认选择第一张优惠券
				console.log("选中的规格", this.attr.productSelect[this.attr.goodsTypeSelect])
				let that = this
				let data = {
					pay_price: price // 首期实付
				}
				// getCouponsQuick(data).then(res => {
				//   that.$set(that.coupon, 'list', res.data);
				//   that.openType = 1;
				//
				//   // 默认选中第一张优惠券
				//   if(that.coupon.list.length>0){
				//     that.ChangCoupons(0)
				//   }
				// })
			},
			couponTap: function() {
				this.coupon.coupon = true
				this.coupon.list.forEach((item, index) => {
					if (item.id == this.couponId) {
						item.is_use = 1
					} else {
						item.is_use = 0
					}
				})
				this.$set(this.coupon, "list", this.coupon.list)
			},
			/**
			 * 处理点击优惠券后的事件
			 *
			 */
			ChangCoupons: function(index) {
				let list = this.coupon.list
				if (list[index].is_use) {
					list[index].use_title = ""
					list[index].is_use = 0
					this.couponTitle = "请选择"
					this.couponId = 0
				} else {
					list[index].use_title = "不使用"
					list[index].is_use = 1
					this.couponTitle = list[index].title
					this.couponId = list[index].id
				}
				this.$set(this.coupon, "coupon", false)
				this.$set(this.coupon, "list", list)
			},
			ruleToggle(index) {
				this.coupon.list[index].ruleshow = !this.coupon.list[index].ruleshow
			},
			ChangCouponsClone: function() {
				this.$set(this.coupon, "coupon", false)
			},

			// 门店价格列表
			storeProductSku() {
				storeProductSku({
					product_id: this.productId,
					sku_id: this.attr.productSelect[this.attr.goodsTypeSelect].id
				}).then(res => {
					if (res.status === 200) {
						this.storeSkuList = []
						this.storeSkuList = res.data
						// 平台价格
						let pt = {
							id: "pt",
							sku_price: this.attr.productSelect[this.attr.goodsTypeSelect].price,
							day_price: this.attr.productSelect[this.attr.goodsTypeSelect].day_price,
							buyout_money: this.attr.productSelect[this.attr.goodsTypeSelect].buyout_money,
							buyout_final_money: this.attr.productSelect[this.attr.goodsTypeSelect].buyout_final_money,
							vip_day_price: this.attr.productSelect[this.attr.goodsTypeSelect].vip_day_price,
							vip_price: this.attr.productSelect[this.attr.goodsTypeSelect].vip_price,
							store_name: "官方平台"
						}
						this.storeSkuList.unshift(pt)
						this.storeSkuCheck = this.storeSkuList[0]
					}
				})
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	.mask {
		&.on {
			z-index: 100;
		}
	}

	.vip-money {
		color: #282828;
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 6rpx;
	}

	.vipImg {
		width: 56rpx;
		height: 20rpx;
		margin-left: 6rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.product-window {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		padding: 0 20rpx;
		background-color: #f7f7f7;
		z-index: 100;
		border-radius: 40rpx 40rpx 0 0;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

		&.store {
			background-color: #f5f5f5;
			border-radius: 40rpx 40rpx 0 0;
			transform: translate3d(0, 0, 0);
			z-index: 102;
			margin: 0;
		}

		.storeTitle {
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #282828;
			position: relative;

			.iconfont {
				position: absolute;
				font-size: 35rpx;
				right: 30rpx;
			}
		}

		.storeList {
			max-height: 690rpx;
			overflow: auto;

			.item {
				width: 690rpx;
				background: #ffffff;
				border-radius: 12rpx;
				margin: 0 auto 20rpx auto;
				padding: 28rpx 30rpx;
				border: 1px solid #ffffff;
				position: relative;

				&.on {
					border-color: var(--view-theme);
				}

				.icon-xuanzhong6 {
					position: absolute;
					right: -6rpx;
					bottom: -6rpx;
					color: var(--view-theme);
					font-size: 54rpx;
				}

				.name {
					font-weight: 500;
					color: #333333;
					font-size: 28rpx;
				}

				.time {
					font-weight: 400;
					color: #888888;
					font-size: 22rpx;
					margin-top: 15rpx;

					.iconfont {
						font-size: 20rpx;
						margin-right: 8rpx;
					}
				}

				.address {
					font-weight: 400;
					color: #888888;
					font-size: 22rpx;
					margin-top: 13rpx;

					.iconfont {
						font-size: 20rpx;
						margin-right: 8rpx;
						margin-top: 6rpx;
					}

					.info {
						width: 590rpx;
						line-height: 1.5;
					}
				}
			}
		}
	}

	.product-window.on {
		transform: translate3d(0, 0, 0);
	}

	.product-window.join {
		padding-bottom: 30rpx;
	}

	.product-window.joinCart {
		padding-bottom: 30rpx;
		z-index: 1000;
	}

	.product-window .rollTop {
		//margin-top: 36rpx;
	}

	.product-window .cart {
		padding: 0 30rpx;
	}

	.product-window .cart .title {
		font-size: 28rpx;
		color: #333333;
	}

	.product-window .cart .carnum {
		height: 54rpx;
		margin-top: 24rpx;
	}

	.product-window .cart .carnum .iconfont {
		font-size: 25rpx;
	}

	.product-window .cart .carnum view {
		// border: 1px solid #a4a4a4;
		width: 84rpx;
		text-align: center;
		height: 100%;
		line-height: 54rpx;
		color: #282828;
		font-size: 45rpx;
	}

	.product-window .cart .carnum .reduce {
		border-right: 0;
		border-radius: 6rpx 0 0 6rpx;
		line-height: 48rpx;
		font-size: 60rpx;
	}

	.product-window .cart .carnum .reduce.on {
		// border-color: #e3e3e3;
		color: #dedede;
	}

	.product-window .cart .carnum .plus {
		border-left: 0;
		border-radius: 0 6rpx 6rpx 0;
		line-height: 46rpx;
	}

	.product-window .cart .carnum .plus.on {
		// border-color: #e3e3e3;
		color: #dedede;
	}

	.product-window .cart .carnum .num {
		background: rgba(242, 242, 242, 1);
		color: #282828;
		font-size: 28rpx;
		border-radius: 4rpx;
	}

	.btn-box {
		display: flex;
		padding: 20rpx 20rpx 0;

		.cart {
			font-size: 28rpx;
			width: 200rpx;
			height: 100rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 100rpx;
			color: #ffffff;
			//margin: 74rpx auto 12rpx;
			margin-right: 30rpx;
			font-weight: bold;
		}

		>.joinBnt {
			flex: 1;
		}
	}

	.product-window .joinBnt {
		font-size: 28rpx;
		width: 710rpx;
		height: 100rpx;
		//border-radius: 40rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		margin: 0 auto 12rpx;
		font-weight: bold;
	}

	.product-window .joinBnt.on {
		background-color: #bbbbbb;
		color: #ffffff;
	}

	.mt-74 {
		margin-top: 74rpx;
	}

	.join_cart {
		background-color: var(--view-bntColor);
	}

	.bg-gray {
		background-color: #cccccc;
	}

	// 租赁
	.lease-box {
		.textpic {
			display: flex;
			align-items: center;
		}

		.lease-price-box {
			border-bottom: 1rpx solid #eeeeee;
		}

		.lease-price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;

			.line {
				width: 4rpx;
				height: 40rpx;
				opacity: 0.6;
			}

			>view:not(.line) {
				width: 48%;
			}
		}

		.coupon {
			padding: 20rpx 16rpx;
			background: rgba(227, 41, 61, 0.1);
			color: darkred !important;
			border: 1rpx solid red;

			text {
				color: red !important;
				opacity: 0.9;
			}
		}
	}

	.time-box {
		width: 100%;
		margin-top: 26rpx;
		display: flex;
		justify-content: center;

		.time {
			width: 96%;

			/deep/ .uni-date-range {
				padding-left: 20rpx;
				padding-right: 20rpx;
			}
		}
	}

	.book-btn {
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			line-height: 1;
		}

		.line {
			width: 2rpx;
		}
	}

	.product-window {
		padding-top: 24rpx;
		display: flex;
		flex-direction: column;
		max-height: 80vh;
		min-height: 50vh;

		.sku-card {
			padding: 20rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}

		.scroll-box {
			flex: 1;
			overflow-y: auto;
		}

		.goods-box {
			.main {
				display: flex;
				position: relative;
				align-items: center;
			}

			.pictrue {
				width: 180rpx;
				height: 180rpx;
				position: relative;
				border: 2rpx solid #f7f7f7;
				border-radius: 16rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}

				.icon {
					width: 30rpx;
					height: 30rpx;
					background-color: rgba(0, 0, 0, 0.4);
					border-radius: 4rpx;
					position: absolute;
					bottom: 8rpx;
					right: 8rpx;
					text-align: center;
					line-height: 23rpx;

					.iconfont {
						color: #ffffff;
						font-size: 20rpx;
					}
				}
			}

			.text {
				width: 410rpx;
				font-size: 32rpx;
				color: #202020;

				.money {
					font-size: 24rpx;
					margin-top: 40rpx;

					.num {
						font-size: 36rpx;
					}

					.stock {
						color: #999999;
						margin-left: 6rpx;
					}

					.icon {
						display: inline-block;
						font-size: 16rpx;
						font-weight: normal;
						background: #ff9500;
						color: #ffffff;
						border-radius: 18rpx;
						padding: 2rpx 6rpx;
						margin-left: 10rpx;

						.iconfont {
							font-size: 16rpx;
							margin-right: 4rpx;
							color: #ffffff;
						}
					}
				}
			}

			.close {
				position: absolute;
				right: 16rpx;
				top: 8rpx;
			}

			.pic-right {
				width: 500rpx;

				.price {
					color: #fc5354;
				}

				.lease-select {
					display: flex;
					flex-wrap: nowrap;

					.l {
						white-space: nowrap;
					}

					.r {
						flex: 1;
					}
				}
			}

			.buyout-box {
				display: flex;
				align-items: center;
				margin-top: 22rpx;
				text-align: center;

				.line {
					width: 2rpx;
					height: 40rpx;
					background: #cccccc;
					margin: 0 20rpx;
				}

				.buy-txt {
					margin-top: 4rpx;
					color: #999999;
					font-size: 22rpx;
					white-space: nowrap;
				}

				.buy-l,
				.buy-r {
					//width: 32%;
					flex: 1;
				}

				.buy-r {
					flex: 1;
					padding-left: 10rpx;
				}
			}
		}

		.store-sku-wrap {
			margin-bottom: 20rpx;
			width: 100%;
			padding-left: 0 !important;
			padding-top: 0 !important;

			.store-sku-tit {
				margin-bottom: 24rpx;

				.l {
					white-space: nowrap;
					color: #333333;
					background: #f7e9ce;
					padding: 10rpx 20rpx;
					border-bottom-right-radius: 20rpx;
					border-top-left-radius: 20rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						margin-right: 10rpx;
					}
				}

				.r {
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}

			.store-sku-box {
				display: flex;
				flex-wrap: nowrap;
				overflow-x: auto;
				width: 100%;
				padding-left: 20rpx;

				.store-item {
					text-align: center;
					min-width: 300rpx;
					/* 最小宽度 */
					max-width: 300rpx;
					/* 最大宽度 */
					height: 132rpx;
					border-radius: 20rpx;
					padding: 20rpx;
					margin-right: 20rpx;
					box-sizing: border-box;
					background: #f5f4f9;
					border: 2rpx solid #f5f4f9;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.line1 {
						position: relative;
					}

					.store-txt-bg {
						position: absolute;
						width: 80%;
						height: 60%;
						background: red;
						top: 4rpx;
						border-radius: 10rpx;
					}
				}

				.store-item-check {
					background: #ffeded;
					color: #f11d22;
					border-color: #f11d22 !important;
				}

				.store-price {
					font-size: 26rpx;
					line-height: 1;
				}
			}
		}

		.productWinList {
			.address {
				width: 690rpx;
				background: #f5f5f5;
				padding: 24rpx 38rpx 24rpx 20rpx;
				margin: 28rpx auto;
				font-weight: 400;
				color: #333333;
				font-size: 28rpx;
				border-radius: 8rpx;
				position: relative;

				&::before {
					position: absolute;
					content: '';
					top: -10rpx;
					width: 0;
					height: 0;
					border-left: 14rpx solid transparent;
					border-right: 14rpx solid transparent;
					border-bottom: 12rpx solid #f5f5f5;
				}

				&.on1 {
					&::before {
						left: 78rpx;
					}
				}

				&.on2 {
					&::before {
						left: 480rpx;
					}
				}

				&.on3 {
					&::before {
						left: 280rpx;
					}
				}

				.info {
					font-weight: 400;
					color: #999999;
					font-size: 24rpx;
					margin-top: 12rpx;

					.con {
						width: 416rpx;
					}
				}
			}

			.item {
				margin-bottom: 36rpx;

				.listn {
					.itemn {
						// height: 56rpx;
						// line-height: 56rpx;
						font-size: 24rpx;
						color: #000000;
						padding: 20rpx;
						//border-radius: 28rpx;
						margin: 24rpx 20rpx 0 0;
						min-width: 140rpx;
						text-align: center;
						//background-color: #F2F2F2;
						word-break: break-all;
						line-height: 1;
						background: #f5f4f9;
						border: 2rpx solid #f5f4f9;

						.limit {
							color: #999999;
							text-decoration: line-through;
						}
					}

					.itemn.on {
						background: #ffeded;
						color: #f11d22 !important;
						border-color: #f11d22 !important;
					}

				}
			}

			.card-item {
				.card-listn {
					white-space: nowrap;
					overflow: auto;
					width: 100%;
				}

				.card-itemn {
					display: inline-flex;
					align-items: center;
					width: 350rpx;

					.l {
						flex: 0 0 100rpx;
						height: 100rpx;
						margin-right: 16rpx;
					}

					.r {
						text-align: left;

						.r-1 {
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;
							width: 200rpx;

							.card-name {
								color: #333333;
								flex: 1;
							}
						}

						.r-2 {}
					}
				}
			}
		}
	}

	.svip-badge {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		border-radius: 14rpx;
		background-color: #f7e9cd;
		margin-left: 12rpx;
		font-size: 34rpx;
		position: relative;
		bottom: 4rpx;
		height: 40rpx;
	}

	.svip_rd {
		border-radius: 14rpx 0 8rpx 14rpx;
		font-size: 22rpx;
		height: 100%;
	}

	.bg--w111-484643 {
		background: linear-gradient(90deg, #484643 0%, #1f1b17 100%);
	}

	.text--w111-FDDAA4 {
		color: #fddaa4;
	}

	.addServicePop {
		background: #ffffff;
		width: 90vw;
		border-radius: 20rpx;
		padding: 10rpx;
		overflow-y: auto;
		position: relative;

		.ebao-iconfont {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			color: #cccccc;
			z-index: 10;
		}

		.main {
			min-height: 50vh;
			max-height: 65vh;
			overflow-y: auto;
		}
	}
</style>